<template>
	<view class="retrievePassword">
		<commonNavBar title="食品安全移动监管"   :showBack="true"   ></commonNavBar>   
		<view class="centre">
			<view class="step">
				<view v-for="(tabs,index) in stepList" :key="index">
					<view :class="{'active':tabs.active}">
						{{ tabs.step }}
					</view>
				</view>
			</view>
			<view class="box" id="centre"  :style="{height:  pageHeight+'px',padding:'0 39rpx' ,background: '#fff','border-radius': '20rpx',margin: '21rpx auto 0'}" >
				<!-- 验证手机号 -->
				<!-- <view class="form-group">
					<input class="formInput" v-model="phone" type="number" placeholder="请输入手机注册号码" placeholder-class="placeholder-class" :disabled="isDisabled" />
				</view>
				<view class="form-group">
					<input class="formInput" v-model="code" type="number" placeholder="请输入短信验证码" placeholder-class="placeholder-class" />
					<button @click="sendCode" :disabled="disableSendCode"
						:class="{'active':disableSendCode}">{{ sendCodeText }}</button>
				</view> -->
				<view class="form-group">
					<input class="formInput" v-model="oldPassword" type="text" placeholder="请输入旧密码" placeholder-class="placeholder-class" :disabled="isDisabled" />
				</view>
				<!-- 验证手机号 -->
				<!-- <button @click="testAndVerify" :class="{'active':disableSendCode}">下一步</button> -->
				<button @click="testAndVerify" class="active">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import SM4Util from '@/static/js/sm4util.js';
	import commonNavBar from '@/components/CommonNavBar.vue';
	
	export default {
		components:{
			commonNavBar
		},
		data() {
			return {
				title: '食品安全移动监管',
				stepList: [{
					// step: '1.验证手机号码',
					step: '1.旧密码',
					active: true
				}, {
					step: '2.设置新密码',
					active: false
				}],
				phone: '',
				code: '',
				newPassword: '',
				disableSendCode: false,
				sendCodeText: '发送验证码',
				countDown: 60,
				isDisabled: false,
				type: '',
				oldPassword: '',
				pageHeight:0
			}
		},
		onLoad() {
			const that = this; 
			const query = uni.createSelectorQuery().in(this);
			setTimeout(function(){
				query.select("#centre").fields({rect:true},(data) => {
				    console.log("得到布局位置信息" + JSON.stringify(data)); 
					that.pageHeight = uni.getSystemInfoSync().windowHeight - data.top;
				  }).exec();  
			},500)
		},
		created() {

		},
		mounted() {
			this.type = uni.getSystemInfoSync().platform
		},
		methods: {
			sendCode() {
				const regExp = /^1[3456789]\d{9}$/;
				if (this.phone != '' && regExp.test(this.phone)) {
					// 发送验证码的逻辑
					this.isDisabled = !this.isDisabled;
					this.disableSendCode = true;
					this.countDown = 60;
					this.sendCodeText = `${this.countDown}s后重新发送`;
					const timer = setInterval(() => {
						this.countDown--;
						if (this.countDown <= 0) {
							clearInterval(timer);
							this.disableSendCode = false;
							this.sendCodeText = '发送验证码';
						} else {
							this.sendCodeText = `${this.countDown}s后重新发送`;
						}
					}, 1000);
				} else {
					uni.showToast({
						title: '请您输入正确的手机号码！',
						icon: 'none',
						image: '',
						duration: 2000,
					});
				}
			},
			// 验证旧密码
			async testAndVerify() {
				let sm4 = new SM4Util('62D95F5BA8E44064231018DF8A9EE027')
				
				const formData = {
					'password': sm4.encryptData_ECB(this.oldPassword)
				}
				
				try {
					const res = await uni.$api.checkPassWord(formData); 
					if(res.data.code === 0) { 
						uni.navigateTo({
							url: '/pages/password/setANewPassword'
						});
					} else {
						uni.showToast({
							icon:'error',
							title: res.data.message
						})
					}
				}  catch (error) { 
					console.error(error)
				}
			}
			
			// 验证手机
			// testAndVerify() {
			// 	const regExp = /^1[3456789]\d{9}$/;
			// 	if (this.phone != '' && regExp.test(this.phone)) {
			// 		if (this.code != '' && this.code.length >= 6) {
			// 			uni.showToast({
			// 				title: '成功',
			// 				icon: 'success',
			// 				image: '/static/img/success.png',
			// 				duration: 2000,
			// 			});
			// 			setTimeout(function() {
			// 				uni.navigateTo({
			// 					url: '/pages/password/setANewPassword'
			// 				});
			// 			}, 2000);
			// 		} else {
			// 			uni.showToast({
			// 				title: '请正确输入验证码',
			// 				icon: 'none',
			// 				image: '',
			// 				duration: 2000,
			// 			});
			// 		}
			// 	} else {
			// 		uni.showToast({
			// 			title: '请您输入正确的手机号码！',
			// 			icon: 'none',
			// 			image: '',
			// 			duration: 2000,
			// 		});
			// 	}
			// }
		},
		watch: {

		},
	}
</script>

<style lang="scss">
	.retrievePassword {

		.centre {
			background: #F5F7FE;
			padding: 20rpx 3% 0 3%;
			
			.step {
				display: flex;
				justify-content: space-around;
			
				view {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
			
					&.active {
						color: #004596;
					}
				}
			}
			
			.box { 
				
				.form-group {
					border-bottom: 1rpx solid #B5B5B5;
					position: relative;
				
					.formInput {
						width: 100%;
						height: 124rpx;
						border: none;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						outline: none;
					}
					
					.placeholder-class {
						color: #BDBDBD;
					}
				
					button {
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0%, -50%);
						height: 50rpx;
						border-radius: 25rpx;
						line-height: 50rpx;
						text-align: center;
						border: 1rpx solid #004596;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #004596;
						padding: 0 20rpx;
				
						&::after {
							display: none;
						}
				
						&.active {
							border: 1rpx solid #B2B2B2;
							color: #B2B2B2;
						}
					}
				}
				
				>button {
					margin: 62rpx auto 0;
					height: 94rpx;
					line-height: 94rpx;
					text-align: center;
					border-radius: 47rpx;
					background: #DBDBDB;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					color: #fff;
					font-weight: 500;
					border: none;
				
					&::after {
						display: none;
					}
				
					&.active {
						background: #004596;
						color: #fff;
					}
				}
			}
		}
	}
</style>